.statistic-box {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    background: no-repeat 50% 50%;
    background-size: cover;
    margin: 0 0 30px
}

.statistic-box.red {
    background-color: #fa424a;
    background-image: url(../../../../assets/user/statistic-box-red.png)
}

.statistic-box.purple {
    background-color: #ac6bec;
    background-image: url(../../../../assets/user/statistic-box-purple.png)
}

.statistic-box.yellow {
    background-color: #fdad2a;
    background-image: url(../../../../assets/user/statistic-box-yellow.png)
}

.statistic-box.green {
    background-color: #46c35f;
    background-image: url(../../../../assets/user/statistic-box-green.png)
}

.statistic-box > div {
    -webkit-border-radius: inherit;
    border-radius: inherit;
    height: 142px;
    background: url(../../../../assets/user/statistic-box-grid.png) 50% 0;
    background-size: 21px 20px;
    position: relative
}

.statistic-box .number {
    font-size: 3.125rem;
    line-height: 1;
    padding: 32px 0 0
}

.statistic-box .caption {
    font-size: 1.0625rem;
    font-weight: 600;
    position: relative;
    min-height: 35px;
    line-height: 1
}

.statistic-box .caption > div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 10px
}

.statistic-box .percent {
    position: absolute;
    right: 10px;
    bottom: 8px;
    text-align: center;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1
}

.statistic-box .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7.5px 8px 7.5px;
    border-color: transparent transparent #fff transparent;
    margin: 0 0 2px
}

.statistic-box .arrow.up {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
}

.statistic-box .arrow.down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}
